<template>
  <div>
    <input type="text" v-model="obj.timing.fire" />
    <input type="text" v-model="obj.name" />
    <h1>{{ obj.name }}</h1>
    <h1>{{ obj.age }}</h1>
    <h1>{{ obj.timing.fire }}</h1>
  </div>
</template>

<script lang="ts">
// import {useStore} from "vuex"
import { defineComponent, reactive, ref, shallowReactive, toRefs } from "vue";

export default {
  // vuex 对多个组件的共享状态进行集中式管理
  // 单向数据流

  setup() {
    const obj = ref({
      name: "dxk",
      age: 18,
      hobby: ["mm", "sk", "ks"],
      timing: {
        fire: "16:00",
        last: "9999",
      },
    });

    // const {name,age}= toRefs(obj)

    return { obj };
  },
};
</script>

<style scoped>
</style>